<!--
 * @Description: 地图签到页面
 * @Author: JiangMing
 * @Date: 2021-09-15 11:14:00
 * @LastEditors: JiangMing
 * @LastEditTime: 2021-09-15 15:08:00
-->
<template>
  <view class="page page-detail-content">
    <map
      id="map"
      ref="map"
      class="map-view"
      :longitude="center.longitude"
      :latitude="center.latitude"
      :markers="markers"
      :circles="circles"
      :show-location="true"
    >
      <cover-view v-if="signState == 2">
        <view class="tips">当前不在集合范围内</view>
      </cover-view>
    </map>
    <view class="footer">
      <view class="title">{{ address }}</view>
      <view class="btn-sign" :class="stateStyles[signState]" @click="sign">
        <view class="btn-sign__time">{{ nowTime || '--' }}</view>
        <view class="btn-sign__tip">{{ signTips[signState] }}</view>
      </view>
      <view class="footer-info">
        <text>请在</text>
        <view class="time">{{ signTime || '--' }}</view>
        <text>之前签到</text>
      </view>
    </view>
  </view>
</template>

<script>
import dayjs from 'dayjs';

export default {
  data() {
    return {
      center: {
        longitude: 113.321676,
        latitude: 23.13081,
      },
      centerMarker: {
        id: 'event-center',
        iconPath: '../../static/images/location.png',
        width: 32,
        height: 32,
        anchor: { x:.5, y:1 }
      },
      position: {},
      address: '',
      signTime: '',
      signState: 2, // 1可签到，2签到范围外，3已迟到
      nowTime: '',
      signTips: {
        1: '立即签到',
        2: '无法签到',
        3: '已经迟到'
      },
      stateStyles: {
        2: 'status-warn',
        3: 'status-danger'
      }
    }
  },
  onLoad(options) {
    const { lng, lat, signTime, address } = options;
    this.signTime = signTime || '2021-08-08 12:00:00'
    this.address = address || '深圳市南山区环城路虾粥村'
    if (lng && lat) {
      this.center = {
        longitude: lng,
        latitude: lat
      }
    }

    // #ifdef APP-NVUE
    this.eventChannel = this.$scope.eventChannel; // 兼容APP-NVUE
    // #endif
    // #ifndef APP-NVUE
    this.eventChannel = this.getOpenerEventChannel();
    // #endif

    this.nowTime = dayjs().format('HH:mm');
    this.timer = setInterval(() => {
      this.nowTime = dayjs().format('HH:mm');
    }, 1000)
    this.getLocation();
  },
  onReady() {
    this.mapCtx = uni.createMapContext('map', this);
  },
  computed: {
    markers() {
      let res = [{
        ...this.centerMarker,
        ...this.center
      }];
      return res;
    },
    circles() {
      return [{
        radius: 500,
        strokeWidth: 1,
        color: '#FFFFFF',
        fillColor: '#027AFF33',
        ...this.center
      }]
    }
  },
  methods: {
    // 获取当前定位
    getLocation() {
      const _this = this;
      uni.getLocation({
        type: 'gcj02',
        success: function (res) {
          _this.position = {
            longitude: res.longitude,
            latitude: res.latitude
          }
          console.log('当前位置：', res);
        }
      });
    },
    sign() {

    }
  },
  onUnload() {
    clearInterval(this.timer);
  }
}
</script>

<style lang="scss" scoped>
.page {
  .map-view {
    height: calc(100% - 520rpx);
    width: 100%;
  }
  .tips {
    margin: 56rpx auto 0;
    border-radius: 16rpx;
    background: #fff;
    box-shadow: 0px 5px 10px rgba(44, 121, 247, 0.2);
    height: 80rpx;
    width: 460rpx;
    line-height: 80rpx;
    font-size: 26rpx;
    color: #FF7F00;
    text-align: center;
  }
  .footer {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9;
    height: 560rpx;
    background-color: #FFF;
    box-shadow: 0px -5rpx 10rpx rgba(44, 121, 247, 0.2);
    border-radius: 16rpx 16rpx 0 0;
    padding: 32rpx;
    box-sizing: border-box;
    text-align: center;
    .title {
      color: #2b2b2b;
      font-size: 36rpx;
      font-weight: 500;
      line-height: 48rpx;
      margin-bottom: 10rpx;
    }
    .footer-info {
      color: rgba(92, 94, 102, .76);
      font-size: 28rpx;
      .time {
        color: #027AFF;
      }
    }
  }
  .btn-sign {
    display: inline-block;
    height: 284rpx;
    width: 284rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    color: #00D694;
    background: url('@/static/images/sign-primary_bg.png') center center no-repeat;
    background-size: 284rpx;
    margin: 0 auto;
    cursor: pointer;
    .btn-sign__time {
      font-size: 50rpx;
      line-height: 60rpx;
      font-weight: bold;
    }
    .btn-sign__tip {
      font-size: 28rpx;
      position: relative;
      line-height: 60rpx;
      font-weight: bold;
      // &::before {
      //   content: '';
      //   width: 20rpx;
      //   height: 2rpx;
      //   background-color: #00D694;
      //   position: absolute;
      //   left: 50%;
      //   margin-left: -10rpx;
      //   top: -10rpx;
      // }
    }
    &.status-warn {
      color: #F8AF33;
      background-image: url('@/static/images/sign-warn_bg.png');
      // .btn-sign__tip::before {
      //   background-color: #F8AF33;
      // }
    }
    &.status-danger {
      color: #FF5151;
      background-image: url('@/static/images/sign-danger_bg.png');
      // .btn-sign__tip::before {
      //   background-color: #FF5151;
      // }
    }
  }
}
</style>